// 1.受控组件
// 定义：表单数据由 React 组件通过 state 管理。
// 特点：
//      输入的值始终由 React 的 state 驱动。
//      通过 onChange 事件更新 state，触发重新渲染。

import React, { useState } from 'react'

function controllFrom() {
  const [inputValue, setInputValue] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Sumitted value:', inputValue)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type='text'
        value={inputValue}
        onChange={e => setInputValue(e.target.value)} />
      {/* e.target 指向触发事件的 DOM 元素（这里是 input 元素） */}
      <button type='submit'>Submit</button>
    </form>
  )
}

// 说明：
// 输入框的值 value={inputValue} 由 React 的 state 控制。
// 每次输入时，onChange 事件更新 state，触发组件重新渲染。



// 2. 非受控组件（Uncontrolled Component）
// 定义：表单数据由 DOM 自身管理，React 通过 ref 获取数据。
// 特点：
//      输入的值直接由 DOM 节点保存。
//      仅在需要时（如提交表单）通过 ref 获取值


import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null)

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Sumitted value:', inputRef.current.value)
    // inputRef.current 指向 <input> DOM 节点。
    // 通过 inputRef.current.value 直接读取 <input> 的当前值。
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' ref={inputRef} />
      <button type='submit'>Submit</button>
    </form>
  )
}

// 说明：
// 输入框的值通过 ref={inputRef} 直接访问 DOM 节点的 value。
// 没有 state 或 onChange，数据仅在提交时获取。